<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>登录页</title>
    <!-- 基本框架 -->
    <link rel="stylesheet" href="../../../css/common.css">
    <script src="../../../script/vue.min.js" type="text/javascript"></script>
    <script src="../../../script/frame.js" type="text/javascript"></script>
    <script src="../../../script/baseConfig.js" type="text/javascript"></script>
    <script src="../../../script/utils.js" type="text/javascript"></script>
    <script src="../../../script/common.js" type="text/javascript"></script>
    <style>
      body{background:#FFF;}
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <div id="container">
          <div class="user-back" @click="api.closeWin()">
              <img src="../../../image/icons/left.png" />
          </div>
          <div class="user-content">
              <h3 class="user-title">欢迎登录！</h3>
                  <div class="user-input">
                      <input v-model.trim="mobile" type="tel" maxlength='11' placeholder="请输入手机号码" />
                  </div>
                  <div class="user-input">
                      <input ref="password" type="password" v-model.trim="password" placeholder="请输入密码" />
                      <img @click="toggleHidePass" v-if="hidePass" src="../../../image/icons/closeEye.png" class="passIcon close" />
                      <img @click="toggleHidePass" v-else src="../../../image/icons/openEye.png" class="passIcon" />
                  </div>
                  <button @click="loginSubmit" class="user-btn public-button">登 录</button>
                  <div class="user-other-btn clearfix">
                      <div class="left" @click="$.openUrl('common/commonUser','common/reg');">注册账号</div>
                      <div class="right" @click="$.openUrl('common/commonUser','common/findPass');">忘记密码</div>
                  </div>
              </div>
              <div class="fixed-btn user-footer" v-if="appWX || appQQ" :style="{'margin-top':footerMarginTop+'px'}">
                  <h3>快速登录</h3>
                  <div>
                      <img v-if="appWX" @click="loginByWeixin" src="../../../image/my/wechat.png" />
                      <img v-if="appQQ" @click="loginByQQ" src="../../../image/my/qq.png"/>
                  </div>
              </div>
        </div>
    </div>
    <script type="text/javascript">
        apiready = function() {
            var wxPlus = api.require('wxPlus');
            var QQ = api.require('QQPlus');

            var app = new Vue({
                el:'#app',
                data:{
					iosTest:false,
                    mobile: '',
                    password: '',
                    hidePass: true,
                    appWX: false,
                    appQQ: false,
                    isFething: false,
					
					footerMarginTop:0,
                },
                methods:{
                    toggleHidePass(){
                        this.$refs.password.type = this.hidePass ? 'input' : 'password'
                        this.hidePass = !this.hidePass;
                    },
                    validate(){
                        var status = true;
                        if(this.mobile.trim() == '' || this.password.trim() == ''){
                            $.toast('手机号、密码不能为空');
                            status = false;
                        }
                        return status;
                    },
                    loginSubmit(){
                        var status = this.validate();
                        if(!status){
                            return false;
                        }
                        var verify_code = String(parseInt(Math.random() * 1000000) % 10000);
                        var passwd = md5(md5(verify_code) + md5(this.password))
                        var formData = {
                            mobile: this.mobile,
                            passwd: passwd,
                            verify_code: verify_code
                        };
                        $.ajax({
                            url: '/user/login/mobile/callback',
                            method: 'post',
                            load: true,
                            data: formData,
                            success: function(res){
                                $.saveUser(res.data);
								api.sendEvent({
								    name: 'navGetData',
								    extra: {navIndex:3}
								});
								api.sendEvent({
								    name: 'backIndex',
								    extra: {navIndex:3}
								});
								api.sendEvent({name: 'loginSuccess'});
								
								api.sendEvent({name: 'reshIndexBasic'});//刷新首页基本信息，比如红包样式
                            },
                            error: function(err){
                                $.toast('登陆失败，'+err.message);
                            }
                        });
                    },

                    checkAppInstalled: function(){
                        var _this = this;
                        wxPlus.isInstalled(function(ret, err) {
                            if (ret.installed) {
                                _this.appWX = true;
                            }
                        });
                        QQ.installed(function(ret, err) {
                            if (ret.status) {
                                _this.appQQ = true;
                            }
                        });
                    },

                    loginByWeixin: function(){
                        var _this = this;
                        if(this.isFething){
                            return false;
                        }
                        this.isFething = true;

                        $.ajax({
                            url: '/user/login/weixin',
                            method: 'get',
							load:true,
                            success: function(res){
                                var appid = res.data.appid;
                                var scope = res.data.scope;
                                var apiSecret = res.data.appsecret;
                                wxPlus.auth({
                                    apiKey: res.data.appid,
                                    scope: res.data.scope
                                }, function(authRet, authErr){
                                    if(authRet && authRet.status){
                                        wxPlus.getToken({
                                            apiKey: appid,
                                            apiSecret: apiSecret,
                                            code: authRet.code
                                        }, function(ret, err){
                                            if(err.code == 0){
                                                _this.loginByWeixinCallbak(ret);
                                            }
                                        });
                                    }
                                });
                            },
                            error: function(err){
                                $.toast(err.message);
                            },
                            done: function(){
                                _this.isFething = false;
                            }
                        });
                    },
                    loginByWeixinCallbak: function(data){
                        $.ajax({
                            url: '/user/login/weixin/callback',
                            method: 'post',
							load:true,
                            data: {
                                access_token: data.accessToken,
                                openid: data.openId
                            },
                            success: function(res){
                                if(res.data.is_mobile_login == 1){
                                    $.saveUser(res.data);
									api.sendEvent({
									    name: 'navGetData',
									    extra: {navIndex:3}
									});
									api.sendEvent({
									    name: 'backIndex',
									    extra: {navIndex:3}
									});
                                    api.sendEvent({name: 'loginSuccess'});
									
									api.sendEvent({name: 'reshIndexBasic'});//刷新首页基本信息，比如红包样式
                                }else{
                                    $.openUrl('common/commonUser','common/bindMobile',{user: res.data})
                                    api.closeWin('common/login');
                                }
                            },
                            error: function(err){
                                $.toast(err.message);
                            }
                        });
                    },
                    loginByQQ: function(){
                        var _this = this;
                        if(this.isFething){
                            return false;
                        }
                        this.isFething = true;

                        $.ajax({
                            url: '/user/login/qq',
                            method: 'get',
							load:true,
                            success: function(res){
                                var scope = res.data.scope;
                                var appid = res.data.appid;

                                QQ.login({
                                    apiKey: appid
                                },function(ret, err) {
                                    if(ret && ret.status){
                                        _this.loginByQQCallbak(ret);
                                    }
                                });
                            },
                            error: function(err){
                                $.toast(err.message);
                            },
                            done: function(){
                                _this.isFething = false;
                            }
                        });
                    },
                    loginByQQCallbak: function(data){
                        $.ajax({
                            url: '/user/login/qq/callback',
                            method: 'post',
							load:true,
                            data: {
                                access_token: data.accessToken,
                                openid: data.openId
                            },
                            success: function(res){
                                if(res.data.is_mobile_login == 1){
                                    $.saveUser(res.data);
                                    api.sendEvent({
                                        name: 'navGetData',
                                        extra: {navIndex:3}
                                    });
                                    api.sendEvent({
                                        name: 'backIndex',
                                        extra: {navIndex:3}
                                    });
                                    api.sendEvent({name: 'loginSuccess'});
									
									api.sendEvent({name: 'reshIndexBasic'});//刷新首页基本信息，比如红包样式
                                }else{
                                    $.openUrl('common/commonUser','common/bindMobile',{user: res.data})
                                    api.closeWin('common/login');
                                }

                            },
                            error: function(err){
                                $.toast(err.message);
                            }
                        });
                    },
                },
                mounted(){
					$.initJs(this);
					
					var dWidth = document.documentElement.clientWidth;
					var px = dWidth * 100 / 750;
					var height = document.querySelector(".user-back").offsetHeight + document.querySelector(".user-content").offsetHeight + (4.7 * px);
					this.footerMarginTop = (screen.availHeight - height);
					
                    this.checkAppInstalled();
                }
            });
        }
    </script>
</body>
</html>
